<script>
export default {
  name: "Detail",
  props:{
    id: String,  //id是字符串
    newsId: String,
    news:String,
  },
  //钩子函数
  mounted() {
    //可以通过新闻编号去获取远程的新闻详情信息
    //注意：不同的编号，这个id不会变化？？？
    /*console.log('params新闻编号:',this.$route.params.id)
    console.log('query新闻编号:',this.$route.query.id)*/
    /*console.log('使用？传递参数，获取到的新闻编号:',this.newsId)*/
    console.log('使用占位符传参，获取到的新闻编号:', this.id);
  },
  // 组件内的守卫
  beforeRouteUpdate(to,from){
    console.log(to.params)
    //设置这个新闻编号
    console.log('使用占位符传参，获取到的新闻编号:', to.params.id);
    //可以直接发送网络请求获取新闻详情。。。
  }
}
</script>

<template>
<!--    <h3>params:新闻详情页面：{{this.$route.params.id}}</h3>
    <h3>query:新闻详情页面：{{this.$route.query.id}}</h3>-->
  <h3>解耦方式，占位符传参:新闻详情页面：{{id}}</h3>
  <h3>解耦方式，?传参:新闻详情页面：{{newsId}}</h3>
  <h3>获取传递的对象:{{news}}</h3>
  <h3>获取传递的对象的属性值:{{news && JSON.parse(decodeURIComponent(news)).title}}</h3>
</template>

<style scoped>

</style>